<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
      <guide class="guide_view" />
      <div
        v-show="isLogin && !chatShow"
        class="little_helper"
        :class="mouseActive ? 'little_active' : ''"
        @mouseenter="mouseActive = true"
        @mouseleave="mouseActive = false"
        @click="handleShowHelper"
        @mousedown.prevent="mousedown($event)"
      >
        <!-- <i v-if="chatShow" class="el-icon-close" style="font-size: 25px; color: white; font-weight: 500"></i> -->
        <img src="@/assets/little_helper.png" style="width: 25px; height: 25px" />
      </div>
        <div class="chat_Back" v-if="chatShow" @click="handleCloseChat">
          <div class="chat_view" @click.stop>
          <div class="chat_header">
            <span style="font-weight: 700">一对一客服</span>
            <!-- <span style="font-size: 22px;padding: 10px;cursor: pointer;" @click="chatShow = false">×</span> -->
            <!-- <i class="el-icon-refresh" style="font-size: 18px; padding: 10px; cursor: pointer" @click="handleReset"></i> -->
            <div>
              <i class="el-icon-refresh" style="font-size: 18px;padding:10px;cursor: pointer;" @click="handleReset"></i>
              <i class="el-icon-close" style="font-size: 18px;padding:10px;cursor: pointer;" @click="handleShowHelper"></i>
            </div>
          </div>
          <div class="chat_content">
            <littleHelper ref="helper"></littleHelper>
          </div>
        </div>
      </div>
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device'
import guide from '@/components/guide'
import littleHelper from './views/components/littleHelper.vue'
import Vue from 'vue'
import { ACCESS_TOKEN, TENANT_ID, USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'

export default {
  components: {
    guide,
    littleHelper,
  },
  data() {
    return {
      locale: zhCN,
      dialogVisible: false,
      visible: false,
      rect: {},
      step: 1,
      bookName: '',
      mouseActive: false,
      chatShow: false,
      isMove: false,
      DragEl: null, //拖动元素
      dragContainerEl: null, //容器元素
      // 位置差
      disX: 0,
      disY: 0,
      // 元素未拖动时的初始位置 绑定的是行内样式
      styleObj: {
        left: 0,
        top: 0,
      },
    }
  },
  created() {
    let that = this
    enquireScreen((deviceType) => {
      // tablet
      // if (deviceType === 0) {
      //   that.$store.commit('TOGGLE_DEVICE', 'mobile')
      //   that.$store.dispatch('setSidebar', false)
      // }
      // // mobile
      // else if (deviceType === 1) {
      //   that.$store.commit('TOGGLE_DEVICE', 'mobile')
      //   that.$store.dispatch('setSidebar', false)
      // }
      // else {
      that.$store.commit('TOGGLE_DEVICE', 'desktop')
      that.$store.dispatch('setSidebar', true)
      // }
    })
  },
  computed: {
    isLogin() {
      let page = this.$route
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountBookId = accountBook && accountBook.id
      return accountBook && accountBookId && typeof accountBookId === 'string' && accountBookId.length > 0 && page.name !== 'login'
    },
  },
  mounted() {
    console.log('app   mounted')
    window.addEventListener('beforeunload', this.handleBeforeUnload)
    this.DragEl = document.getElementsByClassName('little_helper')[0]
    this.dragContainerEl = document.getElementById('app')
  },
  beforeDestroy() {
    console.log('app   beforeDestroy')
  },
  methods: {
    handleCloseChat(event) {
      if (event.target.classList.contains('chat_Back')) {
        this.chatShow = false
      }
    },
    handleShowHelper() {
      if (!this.isMove) {
        this.chatShow = !this.chatShow
      }
    },
    handleReset() {
      this.$refs.helper.reset()
    },
    handleBeforeUnload(event) {
      this.$lcStorage.set('ai-message', [])
    },
    touchmove(e) {
      console.log(e)
    },
    /* 鼠标按下 */
    mousedown(event) {
      if (event.button === 2) {
        return
      }
      if (!this.DragEl) {
        this.DragEl = document.getElementsByClassName('little_helper')[0]
      }
      if (!this.dragContainerEl) {
        this.dragContainerEl = document.getElementById('app')
      }
      // 1,计算位置差
      // 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到鼠标在拖动元素内实际点击的位置
      // 后面每一次拖动时都要减去这个差值 否则就会造成你拖动的位置一直都是元素的左上角 而不是你之前点击的位置
      this.disX = event.clientX - this.DragEl.offsetLeft
      this.disY = event.clientY - this.DragEl.offsetTop

      //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围
      let dragHeight = this.DragEl.offsetHeight
      let dragWidth = this.DragEl.offsetWidth
      let dragContainerWidth = this.dragContainerEl.offsetWidth //获取容器的高度和宽度
      let dragContainerHeight = this.dragContainerEl.offsetHeight

      // 添加鼠标移动事件
      document.onmousemove = (el) => {
        this.isMove = true
        // 3，获取鼠标移动位置
        let moveX = el.clientX - this.disX
        let moveY = el.clientY - this.disY

        // 4，限制拖动
        //控制范围：在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
        // 左边界
        if (moveX <= 0) {
          moveX = 0
        }
        // 上边界
        if (moveY <= 0) {
          moveY = 0
        }
        //下边界  容器高度 - 拖动元素高度
        if (moveY >= dragContainerHeight - dragHeight) {
          moveY = dragContainerHeight - dragHeight
        }
        //右边界   容器宽度 - 拖动元素宽度
        if (moveX >= dragContainerWidth - dragWidth) {
          moveX = dragContainerWidth - dragWidth
        }
        // 5, 开始移动
        this.DragEl.style.left = moveX + 'px'
        this.DragEl.style.top = moveY + 'px'
      }
      /* 6，鼠标抬起解除事件 */
      document.onmouseup = () => {
        document.onmousemove = null
        setTimeout(() => {
          this.isMove = false
        }, 300)
      }
    },
  },
}
</script>
<style lang="scss">
#app {
  height: 100%;
  position: relative;
}

.ant-message {
  z-index: 8888 !important;
}

.guide_view {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bill_mask_back_view {
  position: relative;
}

.bill_mask_view {
  position: absolute;
  left: 0;
  right: 10px;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.custom_star {
  display: flex;
  align-items: center;
  margin-right: 6px;
}

.star {
  color: red;
}

.custom_select_head {
  width: 100%;
  height: 100%;
  position: relative;
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 9;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.cus_div {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.custom_left {
  flex: 1;
  display: flex;
}

.custom_item {
  display: flex;
  align-items: center;
  margin: 5px 0.2rem 5px 0;
  font-size: 12px;
}

.custom_label {
  // padding: 0 12px 0 22px;
  width: 90px;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.order_number {
  width: 150px;
  height: 30px;
  background: #ffffff;
  border-radius: 5px;
  line-height: 30px;
  font-size: 12px;
  font-family: PingFang SC;
  color: #666666;
  padding: 0 6px;
}

.el-dialog__header {
  border-bottom: #e3e3e3 solid 1px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;

  span {
    font-size: 16px !important;
    font-weight: 600 !important;
    // color: #666666 !important;
  }

  .el-dialog__headerbtn {
    position: static;

    .el-icon-close {
      color: #999;
      font-size: 24px !important;
    }
  }
}

.el-checkbox__inner {
  border: #000 solid 1px !important;
}

.el-menu-item.is-active {
  background-color: #219fff !important;
}

// .el-checkbox__inner.is-checked {
//   border: red solid 1px !important;
// }
// .el-checkbox__inner::after {
//   border: #1a93fa solid 1px !important;
// }
input::-webkit-input-placeholder,
//chorme, safari
input:-moz-placeholder,
//Firefox V18及以下
input::-moz-placeholder,
//Firefox 19

input:-moz-placeholder,
input::-moz-placeholder {
  opacity: 1;
}

@-moz-document url-prefix() {
  /* 样式代码 */
  .el-button {
    padding: 0 !important;
  }
}
.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
.little_helper {
  position: absolute;
  right: 50px;
  bottom: 50px;
  width: 50px;
  height: 50px;
  background-color: #155eef;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  z-index: 9876543;
  cursor: pointer;
}
.little_active {
  transform: scale(1.1);
}
.chat_Back {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9876542;
  background-color: rgba($color: #000000, $alpha: 0.1);
}
.chat_view {
  position: absolute;
  right: 40px;
  bottom: 110px;
  width: 7rem;
  height: calc(100vh - 4rem);
  background-color: white;
  border-radius: 10px;
}
.chat_header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 10px;
  // background-color: #1890ff;
  background-image: linear-gradient(to right, rgb(37, 99, 235), rgb(14, 165, 233));
  color: white;
  font-size: 15px;
  border-radius: 10px 10px 0 0;
}
.chat_content {
  height: calc(100% - 50px);
  padding: 10px;
  // overflow: hidden;
  // overflow-y: scroll;
}
.el-select-dropdown__item {
  max-width: 300px !important;
}
</style>